<template>
  <div class="info">
    <div class="content">
      <span>商品名称</span>
      <input type="text" v-model="name"><br />
      <span>商品价格</span>
      <input type="text" v-model="price"><br />
      <span>商品数量</span>
      <input type="text" v-model="num"><br />
      <button @click="ok">确认</button>
      <button @click="no">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '1',
      price: '1',
      num: '1',
    }
  },
  methods: {
    sayHi() {
      console.log('hi~')
    },
    ok() {
      this.close()
    },
    no() {
      this.close()
    },
    close() {
      // 真的关闭弹窗，在这里统一处理
      this.$emit('close')
    }
  },
}
</script>

<style>
  .info {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    background-color: rgba(100, 100, 100, 0.8);
  }
  .info .content {
    width: 400px;
    height: 200px;
    background-color: #fff;
    margin: 100px auto 0;
    border-radius: 5px;
  }
</style>